<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="120px"
      :rules="rules">
    <el-form-item label="运输方式" prop="productShippingMethod">
      <el-radio-group v-model="ruleForm.productShippingMethod">
        <el-radio v-for="(item, idx) of productShippingMethodOptions" :label="item.value" :key="idx">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="运费" prop="productShippingCost">
      <el-radio-group v-model="ruleForm.productShippingCost">
        <el-radio v-for="(item, idx) of productShippingCostOptions" :label="item.value" :key="idx">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="货运公司" prop="productShippingCarrier">
      <el-select v-model="ruleForm.productShippingCarrier" placeholder="请选择货运公司" multiple class="w-full">
        <el-option
            v-for="item in productShippingCarrierOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="发货地" prop="productShippingOrigin">
      <el-input v-model="ruleForm.productShippingOrigin" placeholder="请输入发货地"/>
    </el-form-item>
    <el-form-item label="发货时间" prop="productShippingTime">
      <el-select v-model="ruleForm.productShippingTime" placeholder="请选择发货时间">
        <el-option
            v-for="item in productShippingTimeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="包装方式" prop="productPackagingMethod">
      <el-select v-model="ruleForm.productPackagingMethod" placeholder="请选择包装方式" multiple class="w-full">
        <el-option
            v-for="item in productPackagingMethodOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  productShippingMethod: 'express', // 运输方式
  productShippingOrigin: '', // 发货地
  productShippingCost: 'free', // 运费
  productShippingCarrier: ['sf', 'yt', 'zt'], // 货运公司
  productShippingTime: '', // 发货时间
  productPackagingMethod: ['paperBox'], // 包装方式
})

const productShippingMethodOptions = [
  { label: '快递', value: 'express' },
  { label: '物流', value: 'logistics' },
  { label: '自提', value: 'selfPickup' },
]

const productShippingCostOptions = [
  { label: '包邮', value: 'free' },
  { label: '到付', value: 'freightCollect' },
]

const productShippingCarrierOptions = [
  { label: '顺丰', value: 'sf' },
  { label: '圆通', value: 'yt' },
  { label: '中通', value: 'zt' },
  { label: '申通', value: 'st' },
  { label: '韵达', value: 'yd' },
  { label: '天天', value: 'tt' },
  { label: 'EMS', value: 'ems' },
  { label: '邮政', value: 'yz' },
  { label: '京东', value: 'jd' },
  { label: '德邦', value: 'db' },
  { label: '宅急送', value: 'zjs' },
  { label: '优速', value: 'ys' },
  { label: '全峰', value: 'qf' },
  { label: '国通', value: 'gt' },
  { label: '如风达', value: 'rfd' },
  { label: '联邦', value: 'lb' },
  { label: '亚马逊', value: 'am' },
  { label: 'DHL', value: 'dhl' },
  { label: 'UPS', value: 'ups' },
  { label: '其他', value: 'other' },
]

const productPackagingMethodOptions = [
  { label: '纸箱', value: 'paperBox' },
  { label: '木箱', value: 'woodenBox' },
  { label: '木架', value: 'woodenFrame' },
  { label: '托盘', value: 'pallet' },
  { label: '其他', value: 'other' },
]

const productShippingTimeOptions = [
  { label: '1-3天', value: '1-3' },
  { label: '3-5天', value: '3-5' },
  { label: '5-7天', value: '5-7' },
]

const rules = reactive<FormRules<typeof ruleForm>>({
  productShippingMethod: [{ required: true, message: '请选择运输方式', trigger: 'change' },],
  productShippingOrigin: [{ required: true, message: '请输入发货地', trigger: 'change' },],
  productShippingCost: [{ required: true, message: '请选择运费', trigger: 'change' },],
  productShippingCarrier: [{ required: true, message: '请选择货运公司', trigger: 'change' },],
  productShippingTime: [{ required: true, message: '请选择发货时间', trigger: 'change' },],
  productPackagingMethod: [{ required: true, message: '请选择包装方式', trigger: 'change' },],
})

defineExpose({
  ruleFormRef,
  ruleForm,
  rules,
})
</script>

<style lang="scss" scoped>

</style>
